<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <h2>城市选项切换</h2>

    <div id="bj" class="tabcontent">
      <h3>北京</h3>
      <p>
        北京（Beijing），简称“京”，古称燕京、北平，是中华人民共和国的首都、直辖市、国家中心城市、超大城市，国务院批复确定的中国政治中心、文化中心、国际交往中心、科技创新中心
        ，截至2020年，全市下辖16个区，总面积16410.54平方千米。
      </p>
    </div>

    <div id="sh" class="tabcontent">
      <h3>上海</h3>
      <p>
        上海，简称“沪”或“申”，是中华人民共和国省级行政区、直辖市、国家中心城市、超大城市、上海大都市圈核心城市，国务院批复确定的中国国际经济、金融、贸易、航运、科技创新中心
        。截至2019年，全市下辖16个区，总面积6340.5平方千米，建成区面积1237.85平方千米。
      </p>
    </div>

    <div id="sz" class="tabcontent">
      <h3>深圳</h3>
      <p>
        深圳，广东省辖地级市，简称“深”，别称鹏城，是广东省副省级市，国家计划单列市，超大城市，国务院批复确定的中国经济特区、全国性经济中心城市、国际化城市
        、科技创新中心、区域金融中心、商贸物流中心。全市下辖9个行政区和1个新区，总面积1997.47平方千米，建成区面积927.96平方千米。
      </p>
    </div>

    <div id="gz" class="tabcontent">
      <h3>广州</h3>
      <p>
        广州，广东省辖地级市，简称“穗”，别称羊城、花城，是广东省省会、副省级市、国家中心城市、超大城市
        、广州都市圈核心城市，国务院批复确定的中国重要的中心城市、国际商贸中心和综合交通枢纽。截至2021年，全市下辖11个区，总面积为7434.40平方千米。
      </p>
    </div>

    <button
      class="tablink"
      onclick="openCity('bj', this, '#dd578d')"
      id="defaultOpen"
    >
      北京
    </button>
    <button class="tablink" onclick="openCity('sh', this, '#1f6cc0')">
      上海
    </button>
    <button class="tablink" onclick="openCity('sz', this, '#eaa156')">
      深圳
    </button>
    <button class="tablink" onclick="openCity('gz', this, '#8d94c1')">
      广州
    </button>
  </body>
</html>
